<script>
    $("#bodyView").addClass("background");
    $("#bodyView").removeClass("news_background");
    $("#bodyView").removeClass("achievement_background");
    $("#bodyView").removeClass("edituser_background");
</script>

<!--添加背景-->
<!--警告框-->
<script type="text/ng-template" id="alert.html">
    <div class="alert" style="background-color:rgba(140,37,37,0.69);color:white;font-weight: bold;" role="alert">
        <div ng-transclude></div>
    </div>
</script>
<!--警告框-->
    <div class="box">
        <div class="link link-miss">
            <a href="javascript:void(0)" class="mybutton" data-title="点击登陆" data-toggle="modal" data-target="#loginModal">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                已有账号?
            </a>
        </div>
        <div class="link link-play" >
            <a href="javascript:void(0)" class="mybutton" data-title="点击注册" data-toggle="modal" data-target="#registerModal">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                加入我们
            </a>
        </div>
        <div class="link link-touch">
            <a href="javascript:void(0)" class="mybutton" data-title="游客登陆" ng-click="visitor()">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                随便看看
            </a>
        </div>
        <div class="tip">
            <em></em>
            <span></span>
        </div>
    </div>

<!-- 登陆模态框（Modal） -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h1 class="modal-title text-center" id="myModalLabel">
                    登陆
                </h1>
            </div>
            <div class="modal-body">
                <form name="myform">
                    <div class="form-group">
                        <input  type="text" class="form-control input-lg Input" uib-popover="请填写账号"  popover-trigger="focus" popover-placement="top-left" placeholder="请填写账号" ng-model="loginUser.username" name="username" required>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control input-lg Input" uib-popover="请填写密码"  popover-trigger="focus" popover-placement="top-left" placeholder="请填写密码" ng-model="loginUser.password" name="password" required>
                    </div>
                    <div class="form-group">
                        <br>
                        <a class="inputButton text-center" ng-click="login()">立刻登录</a>
                        <a  class="inputButton text-center" style="float: right;" data-dismiss="modal">关闭</a>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div>
</div><!-- /.modal -->
    <!--登陆模态框-->

    <!-- 注册模态框（Modal） -->
    <div class="modal fade" id="registerModal" tabindex="-1" role="dialog"
         aria-labelledby="registerLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h1 class="modal-title text-center" id="registerLabel">
                        注册

                    </h1>
                </div>
                <div class="modal-body">
                    <!--警告框-->
                    <uib-alert ng-if="passNotSameError" template-url="alert.html">两次密码输入不一致!</uib-alert>
                    <!--警告框-->
                    <div class="form-group">
                        <input ng-blur="checkUsernameIsUsed()" ng-change="checkUsernameLength()" type="text" class="form-control input-lg Input" uib-popover="请填写账号" popover-trigger="focus" popover-placement="top-left" placeholder="请填写账号,要求长度不小于6位" ng-model="registerUser.username" name="username" required>
                        <span class="help-block" style="color: green;" ng-if="usernameError==0&&isUsernameUsed==0" >此用户名可用<span class="glyphicon glyphicon-ok"></span></span>
                        <span class="help-block" style="color: red;" ng-if="usernameError==0&&isUsernameUsed==1">此用户名已被注册<span class="glyphicon glyphicon-warning-sign"></span></span>
                        <span class="help-block" style="color: red;" ng-if="usernameError==1">用户名长度不能小于6位<span class="glyphicon glyphicon-warning-sign"></span></span>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control input-lg Input" uib-popover="请填写密码"  popover-trigger="focus" popover-placement="top-left" placeholder="请填写密码,要求长度不小于6位" ng-model="registerUser.password" name="password" ng-change="checkPassLength()" required>
                        <span class="help-block" style="color: red;" ng-if="passwordError==1">密码长度不能小于6位<span class="glyphicon glyphicon-warning-sign"></span></span>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control input-lg Input" uib-popover="请重复密码"  popover-trigger="focus" popover-placement="top-left" placeholder="请重复密码" ng-model="repeatPassword" name="repeatPassword" ng-blur="checkPass()" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control input-lg Input" ng-change="" uib-popover="请填写昵称"  popover-trigger="focus" popover-placement="top-left" placeholder="请填写昵称" ng-model="registerUser.nickname" name="nickname" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control input-lg Input" uib-popover="请填写真实姓名,这是审批您的身份的重要依据"  popover-trigger="focus" popover-placement="top-left" placeholder="请填写真实姓名" ng-model="registerUser.realname" name="realname" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control input-lg Input" uib-popover="请填写手机号" ng-change="checkPhoneLength()" popover-trigger="focus" popover-placement="top-left" placeholder="请填写手机号" ng-model="registerUser.mobile" name="mobile" required>
                        <span class="help-block" style="color: red;" ng-if="mobileError==1">请填写正确的手机号<span class="glyphicon glyphicon-warning-sign"></span></span>
                    </div>
                    <div class="form-group">
                        <input type="text" ng-change="checkEmail()" class="form-control input-lg Input" uib-popover="请填写邮箱"  popover-trigger="focus" popover-placement="top-left" placeholder="请填写邮箱" ng-model="registerUser.email" name="email" required>
                        <span class="help-block" style="color: red;" ng-if="emailError==1">请填写正确的邮箱<span class="glyphicon glyphicon-warning-sign"></span></span>
                    </div>
                    <div class="form-group">
                        <br>
                        <a class="inputButton text-center" ng-click="register()">注册</a>
                        <a class="inputButton text-center" style="float: right;" data-dismiss="modal">关闭</a>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div><!-- /.modal -->
        <!--注册模态框-->
<script>
    $(function(){
        $(".link .mybutton").hover(function(){
            var title = $(this).attr("data-title");
            $(".tip em").text(title);
            var pos= $(this).offset().left;
            var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2;
            var f = pos-dis;
            $(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);
        },function(){
            $(".tip").animate({"top":160,"opacity":0},300);
        })
    })
</script>
